import React, { useState } from 'react';
import { DatePicker, Toast } from 'antd-mobile';
// import 'antd-mobile/dist/reset.css';

const now = new Date();

export default function StartAndEnd() {
  const [startVisible, setStartVisible] = useState(false);
  const [endVisible, setEndVisible] = useState(false);
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <div style={{display:'flex',marginTop:'20px'}}>

      <div style={{marginRight:'20px'}}>
        <div style={{ fontSize: '18px', fontWeight: 'bold' }}>接待时间</div>
      </div>
      <div >
        <div >
          <div
            style={{ width: '150px', borderRadius: '6px' ,fontSize:'16px',marginBottom:'10px'}}
            onClick={() => {
              setStartVisible(true);
            }}
          >
            {startDate ? startDate.toLocaleDateString() : '开始时间'}
          </div>
          <DatePicker
            title="开始时间"
            visible={startVisible}
            onClose={() => {
              setStartVisible(false);
            }}
            max={endDate || now}
            onConfirm={(val) => {
              setStartDate(val);
              Toast.show(val.toLocaleDateString());
              setStartVisible(false);
            }}
          />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div
            style={{ width: '150px', borderRadius: '6px',fontSize:'16px' }}
            onClick={() => {
              setEndVisible(true);
            }}
          >
            {endDate ? endDate.toLocaleDateString() : '结束时间'}
          </div>
          <DatePicker
            title="结束时间"
            visible={endVisible}
            onClose={() => {
              setEndVisible(false);
            }}
            min={startDate || new Date(1970, 0, 1)}
            max={now}
            onConfirm={(val) => {
              setEndDate(val);
              Toast.show(val.toLocaleDateString());
              setEndVisible(false);
            }}
          />
        </div>
      </div>
    </div>
  );
}